<template>
  <div class="comPage">
    <el-form :model="formData" :size="formSize" label-position="right"
      label-width="auto">
          <el-form-item label="执业证书编码： ">
            <el-input v-model="formData.practice_code" style="width: 300px" maxlength="50" placeholder="请输入资格证书编码" show-word-limit
              type="text" />
          </el-form-item>
          <el-form-item label="执业证书发证日期：">
            <el-date-picker
              v-model="formData.practice_day"
              value-format="YYYY-MM-DD"
              type="date"
              placeholder="请选择执业证书发证日期"
            />
          </el-form-item>
          <el-form-item label="资格证书编码： ">
            <el-input v-model="formData.credentials_code" style="width: 300px" maxlength="50" placeholder="请输入资格证书编码" show-word-limit
                      type="text" />
          </el-form-item>

          <el-form-item label="第一执业机构编码：">
            <el-input v-model="formData.one_code" style="width: 300px" maxlength="50" placeholder="请输入第一执业机构编码" show-word-limit
                      type="text" />
          </el-form-item>

          <el-form-item label="第一执业机构名称：">
            <el-input v-model="formData.one_mechanism" style="width: 300px" maxlength="50" placeholder="请输入第一执业机构名称" show-word-limit
              type="text" />
          </el-form-item>

          <el-form-item label="执业证书：">
            <Upload :file-src="formData['practice']"
                    prop="practice"
                    :token="qiniuToken"
                    show-tip="https://backend_alpha.xiaoliuyisheng.com/static/img/example.5b079de0.png"
                    @handleSuccess="handleSuccess"
                    @handleRemove="handleRemove" />

          </el-form-item>

          <el-form-item label="资格证书：">
            <Upload :file-src="formData['qualification']"
                    prop="qualification"
                    :token="qiniuToken"
                    show-tip="https://backend_alpha.xiaoliuyisheng.com/static/img/example.5b079de0.png"
                    @handleSuccess="handleSuccess"
                    @handleRemove="handleRemove" />
          </el-form-item>

          <el-form-item label="职称证书：">
            <Upload :file-src="formData['position_img']"
                    prop="position_img"
                    :token="qiniuToken"
                    show-tip="https://backend_alpha.xiaoliuyisheng.com/static/img/example.5b079de0.png"
                    @handleSuccess="handleSuccess"
                    @handleRemove="handleRemove" />

          </el-form-item>

    </el-form>
  </div>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>
<script setup>
import Upload from "@/components/Upload/index.vue"
import {
  ref,
} from 'vue'
const props = defineProps({
  formData: { type: Object },
  qiniuToken: { type: String }
})
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const emit = defineEmits(['updateForm'])

const handleRemove = (props) => {
  setTimeout(() => {
    emit("updateForm", "authInfo", props, "")
  }, 200)
}
const handleSuccess = (prop, src) => {
  emit("updateForm", "authInfo", prop, src)
}
</script>

<style lang="scss" scoped>

</style>
